<template>
	<div class="border border-secondary">
		<div class="p-2 d-flex justify-content-between align-items-center bg-secondary">
			<span class="text-white">设置短信提醒</span>
			<Button class="float-right" type="primary" @click="submitCron">保存</Button>
		</div>
		<Row class="">
			<Col class="p-1" span="4">
				<div class="p-1 shadow rounded">
					<Input v-model="cron.cron" placeholder="请输入频率" />
				</div>
			</Col>
			<Col class="p-1" span="20">
				<div class="p-1 shadow rounded w-100 d-flex align-items-center">
					<Button class="px-1" type="error" @click="newDays">新增天数</Button>
					<div v-for="(day, index) in bjs" :key="index" class=" px-1 d-inline-block">
						<Input :value="day" style="width: 80px" placeholder="请输入天数" >
							<Button @click="deleteDays(index)" slot="append" icon="ios-close"></Button>
						</Input>
					</div>
					
					
				</div>
			</Col>
		</Row>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				cron: {
					cronid: 1,
					cron: "",
					bjs: ""
				},
				bjs: []
			};
		},
		methods: {
			getCron: function() {
				this.http.get({
					url: "/setting/cron"
				}).then(data => {
					this.cron = data;
					this.bjs = JSON.parse(this.cron.bjs);
				});
			},
			submitCron: function() {
				this.cron.bjs = JSON.stringify(this.bjs);
				this.http.post({
					url: "/setting/cron",
					data: this.cron
				}).then(data => {
					this.message.info("修改设置成功");
				});
			},
			newDays: function() {
				this.bjs.push(1);
			},
			deleteDays: function(index) {
				this.bjs.splice(index, 1);
			}
		},
		created: function(){
			this.getCron();
		}
	}
</script>

<style>
</style>